import { useState } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import { items } from '../utils';
const { Header, Content } = Layout;

export const LayoutMain = () => {

    const navigate = useNavigate();
    const [current, setCurrent] = useState('/');

    const onClick = ({ key }: { key: string }) => {
        setCurrent(key);
        navigate(key);
    }

    return (
        <Layout>
            <Header>
                <Menu
                    theme='dark'
                    onClick={onClick}
                    selectedKeys={[current]}
                    mode="horizontal"
                    items={items}
                />
            </Header>
            <Content>
                <Outlet />
            </Content>
        </Layout>
    )
}